<template>
	<view class="content">
		<SRV-topbar title="我的云仓业绩" :isLeft="true"></SRV-topbar>
		<view class="nav">
		    <view @click.stop="getsel(0,index)" :class="item.ischeck?'item sel':'item'" v-for="(item,index) in navList" :key="index">
		        <text :class="item.ischeck?'down':'up'" v-if="index1==item.selIndex" v-for="(item1,index1) in item.content" :key="index1">
                {{item.title}} :  {{item1}}</text>
		        <view v-if="item.ischeck" class="list">
		            <text @click.stop="getsel(1,index2,index)" :class="index2==item.selIndex?'sel':''"
		                style="font-weight: 400;" v-for="(item2,index2) in item.content" :key="index2">{{item2}}</text>
		        </view>
		    </view>
		</view>
        <view v-if="pageResult.list.length > 0" class="line" style="padding-bottom: 120rpx;">
        <view v-for="(item,index) in pageResult.list" :key="index" style="border: 4rpx solid #838383;margin: 20rpx 10rpx;border-radius: 20rpx;">
            <view class="list-box">
                <view class="list-left">{{item.user}}</view>
                <view class="list-right">{{item.time}}</view>
            </view>
            <view  v-for="(item2,index2) in item.productList" :key="index2">
                <view class="goods" v-if="isShowOpen[index]">
                    <image :src="item2.product_picture" mode="aspectFill"></image>
                    <view class="right">
                        <view class="right-p">
                			<span v-if="item2.reductionName != ''" style="background: rgba(235, 89, 56, 1); color: #ffffff; padding: 0 10rpx;margin-right: 10rpx;">{{item2.reductionName}}</span>
                			{{item2.product_name}} 
                		</view>
                        <view class="size">
                            {{item2.sku_name}}
                        </view>
                    </view>
                    <view style="width: 100vw;color: #0c1be4;">{{item2.memo}}</view>
                </view>
            </view>
            
            <view class="list-box">
                <view class="list-left" style="display: flex;align-items: center;" @click="showOpenFun(index)">
                    <text>{{isShowOpen[index] ? "隐藏详情" : "展开详情"}}</text>
                    <uni-icons :type="isShowOpen[index] ? 'arrowthinup' : 'arrowthindown'" size="20" color="#000" ></uni-icons>
                </view>
                <view class="list-right">总业绩：<text style="color: #ff003f;">￥{{item.achievement}}</text></view>
            </view>
		</view>
        </view>
        <view v-if="pageResult.list.length == 0" class="nocontent">
            <image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
            <text>暂未找到记录～</text>
        </view>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					dateType: 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
                isShowOpen: [],
                navList: [
                    {
                        title: '时间范围',
                        content: ["全部时间", "今天", "当月", "今年", "今年以前"],
                        ischeck: false,
                        issel: false,
                        selIndex: 0
                    }, 
                ],
			}
		},
		methods: {
            getsel(type, index, index1) {
                if (type == 0) {
                    for (var i in _self.navList) {
                        if (index == i) {
                            _self.navList[i].issel = true;
                            _self.navList[i].ischeck = !_self.navList[i].ischeck;
                        } else {
                            _self.navList[i].issel = false;
                            _self.navList[i].ischeck = false
                        }
                    }
                } else {
                    _self.navList[index1].ischeck = false;
                    _self.navList[index1].selIndex = index;
                    console.info(index);
                    index1 == 0 ? _self.pageParam.dateType = index : '';
                    _self.pageParam.page = 0;
                    _self.pageResult.list = [];
                    _self.getList();
                }
            },
            showOpenFun(k) {
                _self.isShowOpen[k] = !_self.isShowOpen[k];
                _self.$forceUpdate();
            },
			getList(){
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				_self.pageParam.page++
				serve.request({
					url: '/member/batch/spread-list',
					data: _self.pageParam,
                    v: '/v2'
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
                    _self.pageResult.list.forEach((i, k) => {
                       _self.isShowOpen[k] = false; 
                    });
                    console.info(_self.isShowOpen);
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
					uni.hideLoading();
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			},
		},
		onLoad(options) {
			_self = this;
			_self.pageParam.dateType = options.dateType || 0;
			if(_self.pageParam.dateType > 0) {
				_self.navList[0].selIndex = _self.pageParam.dateType;
			}
            _self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100vw;
		height: auto;
		background: #fff;
		color: #333;
	}
    .nav {
        // position: fixed;
        height: 100upx;
        background: #FFFFFF;
        z-index: 200;
        display: flex;
        align-items: center;
        width: 100%;
        top: 156rpx;
        border-bottom: 1rpx rgba(62, 58, 58, 0.8) solid;

        .down {
            position: relative;
        }

        .sel {
            font-weight: bold !important;
            opacity: 1 !important;
        }

        .up {
            position: relative;
        }

        .down::after {
            position: absolute;
            right: -35upx;
            top: 18upx;
            content: '';
            border: 1upx solid rgba(57, 72, 107, 1);
            border-width: 0 4upx 4upx 0;
            padding: 6upx;
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }

        .up::after {
            position: absolute;
            right: -35upx;
            top: 10upx;
            content: '';
            border: 1upx solid rgba(57, 72, 107, 1);
            border-width: 0 4upx 4upx 0;
            padding: 6upx;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .item {
            position: relative;
            height: 28upx;
            line-height: 28upx;
            width: 100%;
            text-align: center;
            opacity: 0.5;
            font-size: 28upx;
            border-right: 1upx rgba(60, 72, 104, 0.2) solid;

            .list {
                display: flex;
                flex-direction: column;
                position: absolute;
                z-index: 300;
                width: 100%;
                background: #FFFFFF;
                top: 65upx;
                border: 1upx rgba(204, 204, 204, 0.3) solid;

                text {
                    height: 70upx;
                    line-height: 70upx;
                    width: 100%;
                    text-align: center;
                }
            }
        }

        .item:last-child {
            border-right: none;
        }
    }
	
    .list-box {
    	border-bottom: 2rpx solid #eaeaea;
    	display: flex;
    	justify-content: space-between;
    	align-content: center;
    	padding: 30rpx 20rpx;
    }
	.goods {
		box-sizing: border-box;
		display: flex;
		align-items: center;
        flex-wrap: wrap;
		padding: 10upx;
		border-bottom: 1upx rgba(235, 236, 240, 1) solid;
	
		image {
			width: 120upx;
			height: 120upx;
			margin-right: 20upx;
		}
	
		.right {
			position: relative;
            width: 70vw;
            margin-left: 20rpx;
            margin-left: 20rpx;
			display: flex;
			// justify-content: center;
			flex-direction: column;
			font-size: 32upx;
			.right-p{
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis; 
				display: -webkit-box; 
				-webkit-box-orient: vertical; 
			}
			.size {
				display: flex;
				justify-content: space-between;
				padding: 20upx 0upx;
				color: #999999;
				font-size: 24upx;
				align-items: center;
			}
		}
	}
	.nocontent {
	    width: 100%;
	    padding-top: 338upx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	
	    image {
	        width: 220upx;
	        height: 124upx;
	    }
	
	    text {
	        font-size: 28upx;
	        color: rgba(204, 204, 204, 1);
	        margin-top: 30upx;
	    }
	}
</style>
